<template>
  <div class="region-div">
    <div style="display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: bold;"
      class="text-gradient">
      数据总量：
      <span ref="totalCountTarget" class="region-title">679,473,929</span>
      条记录
    </div>
    <div class="region-internal">
      <div class="region-internal-div">
        东北地区：
        <span ref="city1" class="region-internal-div-content">8,778,988</span>
      </div>
      <div class="region-internal-div">
        华东地区：
        <span ref="city2" class="region-internal-div-content">8,778,988</span>
      </div>
      <div class="region-internal-div">
        华北地区：
        <span ref="city3" class="region-internal-div-content">8,778,988</span>
      </div>
      <div class="region-internal-div">
        华南地区：
        <span ref="city4" class="region-internal-div-content">8,778,988</span>
      </div>
      <div class="region-internal-div">
        西北地区：
        <span ref="city5" class="region-internal-div-content">8,778,988</span>
      </div>
      <div class="region-internal-div">
        西南地区：
        <span ref="city6" class="region-internal-div-content">8,778,988</span>
      </div>
    </div>
  </div>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ListRegion } from "@/api/screen/region.js";
import { CountUp } from 'countup.js';

const totalCountTarget = ref(null)
const city1 = ref(null);
const city2 = ref(null);
const city3 = ref(null);
const city4 = ref(null);
const city5 = ref(null);
const city6 = ref(null);


onMounted(async () => {
  await handlInit();
})
async function handlInit() {
  const response = (await ListRegion()).data;
  // console.log(response)

  // const sortData = response.sort((a, b) => b.regionCount - a.regionCount)
  // console.log(sortData)

  let TotalValue = response[0].regionSize + response[1].regionSize + response[2].regionSize
    + response[3].regionSize + response[4].regionSize + response[5].regionSize
  new CountUp(totalCountTarget.value, TotalValue).start()
  new CountUp(city1.value, response[0].regionSize).start()
  new CountUp(city2.value, response[1].regionSize).start()
  new CountUp(city3.value, response[2].regionSize).start()
  new CountUp(city4.value, response[3].regionSize).start()
  new CountUp(city5.value, response[4].regionSize).start()
  new CountUp(city6.value, response[5].regionSize).start()

}
</script>

<style lang="scss" scoped>
.region-div {
  font-family: 'Electronic', sans-serif;
  // color: #5DC5EF;
  padding: 20px;

  .region-title {
    font-size: 50px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-weight: bold;
    color: #86BAEF;
  }

  .region-internal {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    padding-left: 80px;

    .region-internal-div {
      width: 33%;
      text-align: center;
      color: #FFFFE0;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: left;
      display: inline-block;
      // text-align: center;

      .region-internal-div-content {
        color: #FFFFE0;
        font-size: 30px;
      }
    }
  }
}
</style>